<template>
	<div class="mobile_search">
		<div class="div2">
			<router-link to="/mobile/home"><</router-link>
			<form @submit.prevent='setSearch()'>
				<input type="search" placeholder="请输入书名,作者,出版社" required v-model="key" />
				<input type="submit" value="搜索" />
			</form>
		</div>
		<aside class="as1" v-show="list == 0">
			<span>历史搜索</span>
			<button @click="removeAll()"><i class="el-icon-delete"></i></button>
		</aside>
		<div class="history" v-show="list ==0">
				<button v-for="(item,i) in hlist" :key="i" v-if="i<10" @click="set(item)">{{item}}</button>
		 </div>
		  <div class="show" v-show="list !=0">
			  <button @click="get()"><</button>
				 <h4>-找到以下内容-</h4>
			 </div>
		 <div class="tab1" v-show="list !=0" >
			 <ul v-for="(item,i) in list" :key="item.id" v-if="i<5">
			 	<li>
			 	<router-link :to="`/mobile/bookDteail/${item.id}`">
			 		<div class="box">
			 			<div class="msg">
			 				<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`">
			 			</div>
							<div class="box4">
			 				<p>{{item.name}}</p><h3><span>￥{{item.price}}</span></h3>
			 			</div>
			 		</div>
			 		</router-link>
			 	</li>
			 </ul>
		 </div>
		 <div class="div3 swiper-container pressList" v-show="list.length == 0 ">
			 <div class="swiper-wrapper">
				 <div class="tab1 swiper-slide" style="border: 0.0625rem solid gainsboro;">
				 <header>
				    <span>热销榜单</span>
			      </header>
				  <ul v-for="(item,i) in bannerlist" :key="item.id" v-if="i<5">
					<li>
						<router-link :to="`/mobile/bookDteail/${item.id}`">
						<div class="box">
							<div class="msg">
								<img :src="`http://127.0.0.1/api/public/showimg/${item.picture}`">
							</div>
							<div class="box4">
							<p>{{item.memo}}</p><h3>新书<span>￥8.88</span>起</h3>
							</div>
						</div>
						</router-link>
					</li>
			     </ul>
			 </div>
			 <div class="tab1 swiper-slide" style="border: 0.0625rem solid gainsboro;">
			 	 <header>
			 		 <span>新书榜单</span>
				 </header>
			 	 <ul v-for="(item,i) in newlist" :key="item.id" v-if="i<5">
			 	 	<li>
						<router-link :to="`/mobile/bookDteail/${item.id}`">
			 	 		<div class="box">
			 	 			<div class="msg">
			 	 			 <img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`">
			 	 			</div>
			 	 			<div class="box4">
			 	 				<p>{{item.name}}</p><h3>新书<span>￥{{item.price}}</span>起</h3>
			 	 			</div>
			 	 		</div>
						</router-link>
			 	 	</li>
			 	 </ul>
			 </div>
		 </div>	
	 </div>
</div>
</template>

<script>
	// 导入vuex的对象
	import Swiper from 'swiper';
	import {mapActions,mapState} from 'vuex'
	export default {
		name:'MobileSearch',
		data(){
			return{
				list:[],
				key:'',
				bannerlist:[],
				newlist:[],
				start:1,
				num:6,
				hlist2:[],
			}
		},
		computed:{
			...mapState('search',['hlist']),
		},
		methods:{
			// 格式：mapActions('模块名',['调用模块内的方法'])
			...mapActions('search',['actionHistory','delHistory']),
			setSearch(){
				this.list = [];
				// 调用search模块的函数actionHistory，并将当前组将的data数据传递过去
				this.actionHistory(this.key);
				this.$postkv(`/api/public/book/findPageKey/${this.start}/${this.num}`,{key:this.key}).then((resp)=>{
					console.log(resp.data);
					if(resp.data.code == 200){
						this.list = resp.data.data.books;
					}else{
						this.$message({
							message:'没找到',
							type:'error'
						})
						return;
					}
					this.key = '';
					console.log(this.list);
				})
			},
			removeAll(){
				this.delHistory();
			},
			get(){
				this.list = [];
			},
			set(key){
				this.key = key;
				this.setSearch();
			}
		},
		mounted() {
			this.$get('/api/public/findHot/1/5').then((resp)=>{
				this.bannerlist = resp.data.data;
				console.log(this.bannerlist)
			})
			this.$get('/api/public/findPageBook/1/6/0').then((resp)=>{
				this.newlist = resp.data.data.books;
				console.log(this.newlist)
			})
			// 调用轮播对象
			new Swiper('.pressList',{
				  spaceBetween: 20,
				  slidesPerView :'auto',
				});
				
		},
	}
</script>

<style scoped>
	a{
		color: black;
	}
	.mobile_search .div2{
		width: 100%;
		display: flex;
		align-items: center;
		height: 6.25rem;
		margin: 0 auto;
		background-color: #f6f6f6;
	}
	.mobile_search .div2 form{
		width: 85%;
	}
	.mobile_search .div2 form input[type="search"]{
		width: 80%;
		height: 2.5rem;
		border-radius: 1rem;
		border: none;
		text-indent: 0.9375rem;
		outline: none;
	}
	.mobile_search .div2 form input[type="submit"]{
		font-size: 1.25rem;
		margin-left: 0.5rem;
		background-color: #f6f6f6;
		border: none;
	}
	.mobile_search .div2 a{
		font-size: 2rem;
		color: #282C28;
		margin-left: 1.25rem;
		margin-right: 1.25rem;
	}
	.mobile_search .as1{
		width: 90%;
		margin: 1.25rem auto;
		display: flex;
		justify-content: space-between;
	}
	.mobile_search .as1 button{
		background-color: #ffffff;
		border: none;
		outline: none;
	}
	.mobile_search .as1 i{
		font-size: 1.5rem;
		color: #adadad;
	}
	.mobile_search .as1 span{
		font-size: 1.3rem;
	}
	.mobile_search .history{
		margin-left: 1.5rem;
		width: 90%;
		flex-wrap: wrap;
	}
	.mobile_search .history button{
		height: 2.5rem;
		font-size: 1rem;
		border-radius: 1rem;
		border: none;
		outline: none;
		margin-bottom: 1.25rem;
		margin-right: 1.25rem;
	}
	.mobile_search .div3{
		width: 90%;
		margin: 0 auto;
		display: flex;
	}
	 .tab1{
		width: 80%;
		border-radius: 1.5rem;
		
	}
	.mobile_search .div3 header{
		width: 100%;
		height: 4.375rem;
		background:linear-gradient(#fbefef,#fbf1d8);
		color: #b63c44;
		display: flex;
		align-items: center;
		border-top-left-radius: 1.5rem;
		border-top-right-radius: 1.5rem;
	}
	.mobile_search .div3 header span{
		margin-left: 1.25rem;
		font-size: 1.25rem;
		font-weight: 600;
	}
	 .tab1 ul{
		width: 90%;
		height: 5rem;
		display: flex;
		margin: 0 auto;
		border: wheat 0.0625rem solid;
		border-radius: 0.5rem;
		margin-bottom: 0.625rem; 
	}
	 .tab1 ul li{
		width: 100%;
		height: 100%;
	}
	 .tab1 ul li .box{
		width: 100%;
		height: 100%;
		display: flex;
	}
	 .tab1 ul li .msg{
		width: 30%;
		height: 100%;
		border: 0.0625rem solid gainsboro;
		border-radius: 0.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	 .tab1 ul li .msg img{
		width: 60%;
		height: 80%;
	}
	 .tab1 ul li .box4{
		width: 70%;
		height: 100%;
	}
	 .tab1 ul li .box4 p{
		width: 90%;
		margin: 0 auto;
		font-weight: normal;
		white-space: nowrap;
		overflow:hidden;
		text-overflow: ellipsis;
	}
	 .tab1 ul li .box4 h3{
		width: 90%;
		margin-top: 2rem;
		margin-left: 0.625rem;
	}
	.tab1 ul li .box4 h3 span{
		color: red;
	}
	.show{
		width: 100%;
		height: 3rem;
		display: flex;
		align-items: center;
	}
	.show button{
		font-size: 0.9375rem;
		margin-left: 0.625rem;
		margin-right: 30%;
		background-color: white;
		border: none;
		outline: none;
	}
</style>
